<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.laohuji {
				border: 1px solid red;
				width: 300px;
				height: 100px;
			}
			.laohuji div {
				width: 33.33%;
				height: 100%;
				float: left;
				background-image: url(img/num.png);
				background-size: 100%;
				background-position: 0 0;
			}
			
		</style>
	</head>
	<body>
		
		
		<div class="laohuji">
			<div></div>
			<div></div>
			<div></div>
		</div>
		
	</body>
	
	
	<script>
		
		var Quad = {
			easeIn: function(t, b, c, d) {
				return c * (t /= d) * t + b;
			},
			easeOut: function(t, b, c, d) {
				return -c * (t /= d) * (t - 2) + b;
			},
			easeInOut: function(t, b, c, d) {
				if((t /= d / 2) < 1) return c / 2 * t * t + b;
				return -c / 2 * ((--t) * (t - 2) - 1) + b;
			}
		};
		
		var g = document.querySelectorAll(".laohuji div")[0];
		var s = document.querySelectorAll(".laohuji div")[1];
		var b = document.querySelectorAll(".laohuji div")[2];
		
		function init(){
			
		}
		
		
		function start(gw, sw, bw){
			s.setAttribute("style", "background-position-y:0px;")
			b.setAttribute("style", "background-position-y:0px;")
			g.setAttribute("style", "background-position-y:0px;")
			
			
			var t1 = 0,		
				b1 = 0,		
				c1 = 2000 + (gw+1) * 100,	
				d1 = 200;	
			
			var t2 = 0,		
				b2 = 0,		
				c2 = 2000 + (sw + 1) * 100,	
				d2 = 200;	
			
			var t3 = 0,		
				b3 = 0,		
				c3 = 2000 + (bw + 1) * 100,	
				d3 = 200;	
				
			var seti = setInterval(function(){
				var r1 = Quad.easeInOut(t1, b1, c1, d1);
				var r2 = Quad.easeInOut(t2, b2, c2, d2);
				var r3 = Quad.easeInOut(t3, b3, c3, d3);
				
				if (t1 <= d1) {
					t1++;
				}
				if (t2 <= d2) {
					t2++;
				}if (t3 <= d3) {
					t3++;
				}
				s.setAttribute("style", "background-position-y:" + r2 + "px;")
				b.setAttribute("style", "background-position-y:" + r3 + "px;")
				g.setAttribute("style", "background-position-y:" + r1 + "px;")
				
				if (t1 > d1 && t2 > d2 && t3 > d3) {
					clearInterval(seti);
				}
				
			}, 1000/60);
		}
		
//		start(1, 5, 9);
		
		
	</script>
	
	
</html>
